<template>
	<div class="home">
		<div class="countDown">
			距离明年元旦还有：
			<p class="countDown_box">
				<span class="countDown_color">{{timePicker.day}}</span> 天
				<span class="countDown_color"> {{timePicker.hosur}}</span> 时 
				<span class="countDown_color"> {{timePicker.minute}}</span> 分 
				<span class="countDown_color"> {{timePicker.second}}</span> 秒
			</p>
		</div>
		<!-- 轮播图 -->
		<swipers-slide :slideList="slideList"/>
		<!-- 数据列表 -->
		<LineList :list="list"/>
		
		<div>
			<svg class="linze_svg_mask" style="width:266px;height:200px">
				<g>
					<path class="linze_svg_graph" stroke="#000" d="m70.87239,89.42019c0,0 0,-3.17952 0.99422,-5.23778c0.56973,-1.16281 2.3892,-1.7538 2.3892,-1.7538c0,0 1.95388,-0.85488 4.32163,-0.67329c1.83438,0.14008 4.20625,1.32195 4.20625,1.32195c0,0 2.62082,0.07816 3.52028,1.67575c1.09814,1.96435 -0.63562,4.25562 -0.63562,4.25562c0,0 0.23,1.33702 1.11459,2.46024c0.72879,0.9234 2.14681,1.68743 2.14681,1.68743c0,0 0.26875,0.23206 0.46994,0.67348c0.17806,0.40281 0.28192,1.03338 0.28192,1.03338c0,0 0.87391,0.75981 0.93411,1.7014c0.06675,1.00664 -0.68181,2.2026 -0.68181,2.2026c0,0 -0.34128,1.86066 -0.96128,3.20396c-0.39984,0.8721 -1.17482,1.42994 -1.17482,1.42994c0,0 -1.77579,1.77301 -3.94487,2.18244c-1.64061,0.30868 -3.83113,-0.7183 -3.83113,-0.7183c0,0 1.12536,4.18612 0.99841,8.4504c0.17982,6.69318 -4.11507,12.34318 -5.95236,19.88129c-0.64884,2.27107 -0.24897,4.91079 -0.24897,4.91079c0,0 -0.18632,6.625 -0.87223,12.5242c-0.55899,4.84774 -1.63238,9.18035 -1.63238,9.18035c0,0 0.6569,2.61862 0.49714,4.30699c0.55676,0.43038 2.93881,2.31371 2.63569,3.81955c-0.45481,0.095 -1.29684,-0.48737 -1.29684,-0.48737c0,0 -0.3858,0.53438 -0.86236,0.61566c-0.35035,0.064 -0.67766,0.15504 -0.83103,-0.31222c-0.8211,0.23184 -2.27706,-0.62414 -2.27706,-0.62414c0,0 -1.12037,-1.0602 -1.64884,-2.18862c-0.28608,-0.605 -0.73739,-0.04452 -0.1517,-1.631c0.58572,-1.58648 -0.06017,-1.90006 -0.06017,-1.90006c0,0 -1.3092,0.81428 -2.18143,0.7652c-0.42868,-0.0278 -0.75186,-0.94039 -0.75186,-0.94039c0,0 0.15745,-1.90458 0.05356,-3.57381c-0.15332,-2.37469 -0.58864,-4.7579 -0.58864,-4.7579c0,0 -1.04865,-1.46429 -1.86648,-5.66115c-0.56557,-2.89717 -0.62574,-6.95944 -1.02148,-9.95074c-0.39574,-3.0426 -1.19056,-5.0418 -1.12533,-4.9952c-1.90589,3.15507 -4.29527,3.904 -4.29527,3.904c0,0 0.38996,4.79436 0.06185,8.7036c-0.31495,3.76934 -1.3463,6.65706 -1.3463,6.65706c0,0 -1.09025,3.47708 -1.41719,5.83106c-0.23269,1.67556 0.04646,2.08639 0.25888,2.50287c1.29517,1.97023 7.06982,-1.6081 8.4413,0.96822c0.14099,0.10264 0.43942,0.5856 0.78486,0.85918c0.36686,0.29079 1.09401,1.7272 0.87471,1.88962c-0.18219,0.14106 -0.5738,-0.01925 -0.5738,-0.01925c0,0 0.1055,0.87842 -0.13686,1.19908c-0.25888,0.32698 -0.86236,0.10464 -0.86236,0.10464c0,0 -0.39325,-0.40608 -1.13111,-0.52142c-0.7024,-0.10904 -1.75685,0.07258 -1.75685,0.07258c0,0 -2.86498,-1.35826 -5.39341,0.88923c-1.33337,0.90709 -2.35207,0.9127 -3.7025,1.13064c-0.75186,0.12185 -1.09236,-0.63901 -1.09236,-0.63901c0,0 -0.24817,0.42963 -0.74528,0.80151c-0.56638,0.41463 -1.17069,1.02589 -1.17069,1.02589c0,0 0.28359,0.45539 0.73953,0.778c0.28772,0.19677 0.831,0.32073 0.831,0.32073c0,0 2.09859,0.4242 4.08175,-0.39964c0.32895,-0.02565 2.73297,1.65639 3.04543,2.01547c0.23826,0.26935 -0.23226,1.10043 -0.63152,1.31668c-2.03909,1.57224 -3.48275,-0.75055 -6.74875,0.86147c-3.01393,0.47535 -4.25981,-0.05993 -5.26481,-1.00886c-0.66694,-0.62847 -0.72137,-1.9708 -0.72137,-1.9708c0,0 -0.96541,-1.68223 -1.04206,-3.24683c-0.033,-0.69032 1.27455,-3.1463 1.82115,-4.39879c0.45013,-1.02167 0.9786,-2.27205 0.9786,-2.27205c0,0 0.4221,-1.16273 0.70817,-2.64612c0.21352,-1.07742 0.2531,-2.34904 0.51611,-3.38145c0.31492,-1.26545 0.87388,-2.26561 0.87388,-2.26561c0,0 -1.51201,-1.56249 -2.67031,-3.51829c-1.43367,-2.4292 -2.56562,-5.34249 -2.56562,-5.34249c0,0 -3.73135,-3.59517 -6.5179,-7.92021c-1.76343,-2.73068 -3.07512,-6.95312 -3.07512,-6.95312c0,0 -0.65349,0.88656 -1.58043,2.00816c-6.58631,7.96944 -7.11347,24.17902 -9.1849,41.74389c-1.34743,11.42554 -4.56321,18.71875 -6.64986,21.08486c-1.89948,2.15664 -4.28288,2.26783 -4.28288,2.26783c0,0 -1.48974,0.03202 -1.65955,-0.36766c-0.16325,-0.36985 1.00083,-1.17995 1.00083,-1.17995c0,0 2.1363,-1.42651 3.4766,-3.68489c5.6125,-9.45686 6.17807,-36.87804 8.69232,-48.50464c1.2706,-5.87566 2.98356,-21.59554 14.93656,-30.17529c8.68588,-6.23466 27.45898,-10.44191 32.16168,-18.21944c0.94482,-1.5626 1.96875,-3.17733 1.96875,-3.17733z" fill="#ff7f00"/>
					<path class="linze_svg_graph2" stroke="#000" d="m140.44268,180.90259c0.02743,-4.65786 5.19794,-6.19235 7.32046,-9.4239c8.19326,-7.98921 16.17636,-17.21288 21.19853,-29.80366c5.33541,-12.86449 8.22885,-28.62256 6.0585,-43.54471c-1.15092,-9.25933 -7.34513,-16.66999 -13.89927,-15.51109c-4.31661,0.85804 -9.30277,2.30174 -11.80039,8.09237c-2.71108,2.95856 -1.21952,9.89265 2.39474,7.25906c4.62403,-2.5646 10.43176,2.66498 10.24888,10.0772c0.00536,7.02819 -4.89126,11.98617 -9.45449,11.32648c-5.08255,-0.07384 -10.11385,-6.03237 -10.00762,-13.75692c-0.35224,-12.44985 7.06153,-22.61813 14.99721,-25.22744c7.09578,-3.21259 15.34513,-1.91988 21.32867,4.76317c4.4523,4.42203 7.95844,11.12582 8.68994,19.03852c1.57935,10.28751 -0.46169,20.90428 -4.00232,29.85428c-4.55038,12.05722 -11.50313,21.92785 -19.57405,29.00862c-7.49607,6.94567 -15.29321,13.21849 -23.35934,18.65546c-0.04649,-0.26913 -0.09298,-0.53828 -0.13948,-0.80742l0,0.00001zm53.85088,-50.76155c-3.85924,-2.53925 -3.00779,-12.85733 1.48425,-13.08939c3.36121,-1.13921 6.50081,3.9651 5.46322,8.68529c-0.65453,4.41708 -4.30417,6.3315 -6.94747,4.40409zm0,-28.22568c-3.85924,-2.53924 -3.00779,-12.85733 1.48425,-13.08938c3.36121,-1.1392 6.50081,3.9651 5.46322,8.68529c-0.67153,4.43206 -4.28538,6.32343 -6.94747,4.40409z" fill="#f6ff00"/>
					<path class="linze_svg_graph3" stroke="#000" d="m186.37063,182.18064c-5.53831,-0.75633 -10.68251,-4.87009 -9.63771,-9.67223c0.5288,-5.27178 5.70822,-9.51468 10.91951,-12.31016c6.93555,-3.81999 16.41838,-5.23905 24.06149,-1.94437c0.44784,-26.57304 0.19261,-53.15273 0.26045,-79.72878c4.81979,-0.94418 3.2614,4.16118 4.35605,6.52218c1.04453,6.94262 6.80016,12.39025 12.52923,17.25472c7.10784,6.11441 14.65536,12.59753 16.96567,21.06865c2.52279,9.82834 -1.5103,19.88284 -6.74419,28.69091c-0.379,2.8229 -6.77918,6.90699 -3.72991,1.80586c5.13444,-8.72637 9.37615,-18.77624 5.87157,-28.43933c-3.33738,-9.64194 -13.73975,-17.69441 -26.12304,-19.13828c-0.08003,20.35968 0.19488,40.72321 -0.29348,61.07963c-1.21741,5.99629 -7.65484,10.44548 -14.11045,12.98601c-4.45145,1.56805 -9.47552,2.51677 -14.32517,1.82519l0,-0.00001z" fill="#ff4300"/>
					<path class="linze_svg_graph4" stroke="#000" d="m108.16877,180.34111c-8.3174,-1.11647 -12.80827,-11.55304 -4.49749,-15.37613c8.66379,-3.76961 13.81651,9.65007 4.35292,10.96176c-5.18198,1.63933 6.72797,4.38459 8.94777,1.62808c6.9361,-2.83496 5.86465,-10.21354 4.19586,-15.41005c-0.57914,-3.98104 -1.30338,-8.2431 -7.25161,-5.98054c-14.35059,0.97499 -25.71196,-11.31878 -24.57077,-22.81955c0.38744,-10.84779 10.90994,-18.27762 18.70159,-25.81062c-2.55802,-9.85505 -3.33039,-21.24034 4.08506,-29.82827c6.83049,-6.98104 10.29749,5.79369 11.45289,10.1285c2.56646,10.13261 -2.55084,20.78037 -11.06593,27.923c0.81306,3.38803 1.61305,6.77833 2.44164,10.16369c8.9983,-1.46704 17.58759,4.9536 18.07839,12.47417c1.39038,6.79119 -3.76791,13.20461 -10.81361,16.12327c-0.11585,5.83168 3.70011,11.88087 2.32898,17.90292c-1.31677,6.22626 -9.58578,9.27944 -16.38569,7.91977l0,0zm9.39392,-26.56913c2.54936,-4.04105 -2.07482,-11.17783 -2.32871,-16.36502c0.09985,-9.04535 -11.2624,1.75217 -7.88351,6.19413c1.00161,2.62841 9.69536,7.44851 1.70946,4.47577c-8.33749,-4.21375 -7.95561,-15.05551 -0.33754,-19.63323c6.39129,-1.19547 2.48773,-8.39746 1.28345,-10.76305c-7.84987,6.04108 -16.74735,13.64802 -15.39356,23.42556c1.01977,9.16445 12.85078,14.7239 22.95041,12.66584l0,0zm5.28173,-1.74927c7.48692,-4.05868 7.24121,-14.7104 -0.95002,-18.01406c-8.74009,-3.89982 -2.75368,6.31706 -2.59354,10.20597c1.21294,1.48872 0.52586,10.16334 3.54356,7.80809zm-9.22722,-48.8252c4.6054,-4.70456 9.86987,-11.49649 6.63552,-17.71655c-6.96515,-3.88247 -10.83574,6.61433 -11.00704,11.21065c-0.06337,2.98036 -0.58349,13.25314 4.37152,6.50589l0,0l0,0z" fill="#ffff56"/>
					<text class="linze_svg_font" font-style="italic" font-weight="normal" transform="matrix(1.18409 0 0 1.21589 -5.64032 8.05385)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" stroke-width="0" y="57.50008" x="19.39673" fill="#ffff00">逸</text>
					<text class="linze_svg_font2" font-style="italic" font-weight="normal" transform="matrix(1.47004 0 0 1.53276 -36.8924 -19.38)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="41.03136" x="61.01658" stroke-width="0" fill="#ff7f00">曦</text>
					<text class="linze_svg_font3" font-style="italic" font-weight="normal" transform="matrix(1.56 0 0 1.41935 -79.52 -7.54839)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="35.25" x="155.17949" stroke-width="0" fill="#ff007f">穆</text>
					<text class="linze_svg_font4" font-style="italic" font-weight="normal" transform="matrix(1.2229 0 0 1.25766 -57.8739 6.11921)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="48.45804" x="219.14439" stroke-width="0" fill="#ff00ff">泽</text>
					<path class="linze_svg_heart" stroke="#000" id="svg_25" d="m128.00496,45.67661c-8.60745,-8.6236 -11.68496,-14.07873 -11.7099,-20.7568c-0.02274,-6.08788 3.77628,-11.96358 7.7133,-11.92969c1.96597,0.01695 6.1831,2.25763 7.6764,4.07873c0.75241,0.91758 1.10879,0.8271 2.78396,-0.70683c4.5591,-4.17469 9.0111,-4.26232 11.89442,-0.23409c4.60815,6.43795 3.76919,14.12604 -2.41174,22.10067c-3.28613,4.23977 -10.46233,11.76137 -11.22127,11.76137c-0.23093,0 -2.35726,-1.94102 -4.72517,-4.31336l0,0z" stroke-width="0" fill="#ff0000"/>
				</g>
			</svg>
			
			<Echarts/>
		</div>
	</div>
	
</template>

<script>
	import { ref } from 'vue'
	import { countDown } from '../../public/js/isMobile.js';//定时
	import Swipers from '../components/swiper.vue'
	import LineList from '../components/LineList.vue'
	import Echarts from '../components/Echart.vue'
	export default {
		name:'Home',
		components: {
			"swipers-slide":Swipers,
			Echarts,
			LineList,
		},
		setup() {
			const timer = ref('');
			const timePicker = ref([]);
			const slideList = ref([
				{img: '../../public/image/h1.png'},
				{img: '../../public/image/h2.png'},
				{img: '../../public/image/h3.png'},
			]);
			const list = ref([
				{ id: 1, title: '第一条数据', img: '../../public/image/list1.jpg', },
				{ id: 2, title: '第二条数据', img: '../../public/image/list2.jpg', },
				{ id: 3, title: '第三条数据', img: '../../public/image/list3.jpg', },
				{ id: 4, title: '第四条数据', img: '../../public/image/list4.jpg', },
				{ id: 5, title: '第五条数据', img: '../../public/image/list5.jpg', },        
				{ id: 6, title: '第六条数据', img: '../../public/image/list6.jpg', },
			]);
			
			setInterval(()=>{
				timePicker.value = countDown();
			},1000);// 元旦倒计时
			return { timer,timePicker,slideList,list}
		}
	}
</script>

<style>
	.home{max-width:1200px;padding:30px 15px;margin:auto;text-align:center;}
	.countDown{font-size: 22px;margin-bottom:20px;}
	.countDown_box{display: inline-block;width: 280px;text-align: left;}
	.countDown_color{color:#f00;font-family: Avenir;}

	.linze_svg_mask{margin-top:20px;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));}
	.linze_svg_graph{animation: linzeAnimat5 5s infinite alternate ease-in-out forwards;}
	.linze_svg_graph2{animation: linzeAnimat6 5s infinite alternate ease-in-out forwards;}
	.linze_svg_graph3{animation: linzeAnimat 5s infinite alternate ease-in-out forwards;}
	.linze_svg_graph4{animation: linzeAnimat2 5s infinite alternate ease-in-out forwards;}
	.linze_svg_font{animation: linzeAnimat 8s infinite alternate ease-in-out forwards;}
	.linze_svg_font2{animation: linzeAnimat2 8s infinite alternate ease-in-out forwards;}
	.linze_svg_font3{animation: linzeAnimat3 8s infinite alternate ease-in-out forwards;}
	.linze_svg_font4{animation: linzeAnimat4 8s infinite alternate ease-in-out forwards;}
	@keyframes linzeAnimat{
	    0% {fill:hsl(180, 100%, 50%)} 20% {fill:hsl(240, 100%, 50%)} 40% {fill:hsl(300, 100%, 50%)}
	    60% {fill:hsl(0, 100%, 50%);} 80% {fill:hsl(60, 100%, 50%)} 100% {fill:hsl(120, 100%, 50%)}
	}
	@keyframes linzeAnimat2 {
	    0% {fill:hsl(240, 100%, 50%)} 20% {fill:hsl(300, 100%, 50%)} 40% {fill:hsl(0, 100%, 50%);}
	    60% {fill:hsl(60, 100%, 50%)} 80% {fill:hsl(120, 100%, 50%)} 100% {fill:hsl(180, 100%, 50%)}
	}
	@keyframes linzeAnimat3 {
	    0% {fill:hsl(300, 100%, 50%)} 20% {fill:hsl(0, 100%, 50%);} 40% {fill:hsl(60, 100%, 50%)}
	    60% {fill:hsl(120, 100%, 50%)} 80% {fill:hsl(180, 100%, 50%)} 100% {fill:hsl(240, 100%, 50%)}
	}
	@keyframes linzeAnimat4 {
	    0% {fill:hsl(0, 100%, 50%);} 20% {fill:hsl(60, 100%, 50%)} 40% {fill:hsl(120, 100%, 50%)}
	    60% {fill:hsl(180, 100%, 50%)} 80% {fill:hsl(240, 100%, 50%)} 100% {fill:hsl(300, 100%, 50%)}
	}
	@keyframes linzeAnimat5 {
	    0% {fill:hsl(60, 100%, 50%)} 20% {fill:hsl(120, 100%, 50%)} 40% {fill:hsl(180, 100%, 50%)}
	    60% {fill:hsl(240, 100%, 50%);} 80% {fill:hsl(300, 100%, 50%)} 100% {fill:hsl(0, 100%, 50%)}
	}
	@keyframes linzeAnimat6 {
	    0% {fill:hsl(120, 100%, 50%)} 20% {fill:hsl(180, 100%, 50%)} 40% {fill:hsl(240, 100%, 50%);}
	    60% {fill:hsl(300, 100%, 50%)} 80% {fill:hsl(0, 100%, 50%)} 100% {fill:hsl(60, 100%, 50%)}
	}
	.linze_svg_heart{fill:red;}
	#main{display:inline-block;vertical-align:middle;width:480px;height:480px;padding-top:20px;}
	@media only screen and (max-width:520px){
		.home{padding:25px 10px;}
		#main{width:300px;height:300px;}
	}
</style>
